<template>
	<div id="detailBox">
		<div class="out" v-if="img.length > 0">
			<div class="picture">
				<img :src="proxy.img+appoint_img" alt="">
			</div>
			<div class="info">
				<div class="top">
					<div>
						<span class="iconfont icon-zhuanfa_"></span>
						<span class="iconfont icon-jinggao"></span>
						<!-- 喜欢 -->
						<div class="likebox" @click="good">
							<!-- 样式绑定 -->
							<span class="iconfont icon-xihuan" :style="sty"></span>
						</div>
						<!-- 采集 -->
						<div class="caijibox" @click="gather" :style="sty3">
							<span>{{caijiText}}</span>
							<span class="iconfont icon-lightning"></span>
						</div>
					</div>
					<div class="text">
						<span>{{img[0].ptext}}</span>
					</div>
				</div>
				<div class="second">
					<span class="iconfont icon-liebiao"></span>
					<span>{{img[1].bname}}</span>
					<div class="imgbox">
						<img v-for="el in img[3]" :src="proxy.img+el.img" alt="" @click="show(el.img,el.pid)">
					</div>
				</div>
				<div>
					<img :src="proxy.img+img[2].touxiang" alt="">
					<span>{{img[2].nickname}}</span>
				</div>
			</div>
		</div>
		<div @click="cha">X</div>
		
	</div>
	<div class="gather_box" :style="sty2">
		<div class="gather_con">
			<div @click="close" class="close">X</div>
			<div class="draw_box">
				<span>请选择采集到哪一个画板</span>
				<hr>
				<div class="draw" v-for="el in draws">
					<span>{{el.bname}}</span>
					<button @click="gather_to(el.bid,pid)">采集</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { useRouter, useRoute } from 'vue-router';
	import {
		getCurrentInstance,
		ref,
		reactive,
		onMounted,
		nextTick
	} from 'vue'
	let {proxy} = getCurrentInstance()
	let route = useRoute()
	let router = useRouter()
	let pid = ref('')
	let img = ref([])
	// 左边显示的图片地址，一开始是点进来的那张图片，后续右边点击某一张点后重新复制
	let appoint_img = ref('')
	let isLike = ref(null)
	// 喜欢图标的样式
	let sty = reactive({
		color:'black'
	})
	// 采集盒子是否显示的样式
	let sty2 = reactive({
		display:'none'
	})
	// 采集盒子的样式
	let caijiText = ref('采集')
	let sty3 = reactive({
		backgroundColor:'#FF5967',
		color: '#fff'
	})
	let draws=ref([])
	
	let islogin = ref('')
	
	let getDetail = async()=>{
		let res = await proxy.$axios.get('/egg/detail',{
			params:{
				pid:pid.value,
				uid:18
			}
		})
		console.log(res,'====')
		img.value = res.data.data
		appoint_img.value = img.value[0].img
		isLike.value = img.value[4]
		console.log(img.value,'图片信息')
	}
	let show = (url,id)=>{
		// 点击右边的图片后，改变了左边显示图片的地址以及pid的值，此时喜欢图标的颜色复原
		appoint_img.value = url
		pid.value = id
		sty.color = 'black'
	}
	let cha = ()=>{
		router.push({path:'/discovery'});
	}
	// 点赞
	let good = async()=>{
		console.log(pid.value,sty.color)
		// 获取登录成功的信息，没有则提示请先登录
		islogin.value=window.localStorage.getItem("isLogin")
		if(!(islogin.value=='OK')){
			 alert("请先进行登录")
			 return
		}
		// 获取到登录信息，则执行相应的功能
		let good = null
		// 如果是黑色，则表示点赞，红色则表示取消
		if(sty.color =='black'){
			good = true
		}else{
			good = false
		}
		let res = await proxy.$axios.get('/egg/good',{
			params:{
				pid:pid.value,
				// uid:18,
				good
			}
		})
		console.log(res.data)
		if(res.data.code == -1){
			// 取消点赞成功
			sty.color = 'black'
		}else{
			// 点赞成功
			sty.color = 'red'
		}
	}
	let gather = async()=>{
		// islogin.value=window.localStorage.getItem("isLogin")
		// console.log(islogin.value)
		islogin.value=window.localStorage.getItem("isLogin")
		if(!(islogin.value=='OK')){
			 alert("请先进行登录")
			 return
		}
		// 点击采集后弹出一个框
		console.log('采集')
		sty2.display='flex'
		sty2.justifyContent='center';
		sty2.alignItems='center';
		// 把某用户的全部画板展示出来
		let res = await proxy.$axios.get('/egg/drawborder',{
			params:{
				// uid:20,
			}
		})
		console.log(res.data)
		draws.value=res.data.data
		console.log(draws.value,'====')
	}
	
	let close = async()=>{
		sty2.display='none'
	}
	
	let gather_to = async(bid,pid)=>{
		console.log('画板id',bid,pid)
		// 采集到哪个画板，将画板id传过去
		let res = await proxy.$axios.get('/egg/gather_to',{
			params:{
				bid,
				pid
			}
		})
		console.log(res.data)
		if(res.data.code == 1){
			alert('采集成功')
			// 调用关闭模态弹窗的方法
			close()
			// 将采集按钮的样式改变
			caijiText.value = '已采集'
			sty3.backgroundColor = '#EDF2F5'
			sty3.color = '#717477'
		}
	}
	
	onMounted(async()=>{
		console.log(route.query)
		pid.value = route.query.id
		await getDetail()
		nextTick().then(() => {
			if(isLike.value == true){
				// 喜欢了
				console.log('已经喜欢了，显示红色')
				sty.color = 'red'
			}else{
				console.log('没有喜欢，显示黑色')
				sty.color = 'black'
			}
		});
	})
</script>

<style scoped>
	@import url("//at.alicdn.com/t/c/font_4298666_ll5606am6r.css");
	* {
		margin: 0;
		padding: 0;
	}
	#detailBox {
		width: 100%;
		/* height: 600px; */
		background-color: #F7F9FA;
		/* border: 1px solid red; */
		display: flex;
		justify-content: center;
		/* align-items: center; */
	}
	.out {
		width: 1100px;
		/* border: 1px solid red; */
		background-color: #fff;
		border-radius: 20px;
		display: flex;
		margin-top: 20px;
	}
	.out+div {
		margin: 20px;
		font-size: 20px;
		color: #555555;
		cursor: pointer;
	}
	.picture {
		/* border: 3px solid green; */
		border-radius: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.picture img {
		width: 658px;
		margin: 20px;
		border-radius: 20px;
	}
	.top>div {
		width: 380px;
		/* border: 1px solid red; */
		display: flex;
	}
	.icon-lightning {
		color: white;
	}
	.info {
		/* border: 1px solid green; */
	}
	.likebox {
		width: 40px;
		height: 40px;
		border: 1px solid #c8c8c8;
		border-radius: 12px;
		margin-left: 140px;
		margin-right: 10px;
		text-align: center;
		line-height: 40px;
		font-weight: bolder;
		cursor: pointer;
	}
	.icon-jinggao,.icon-zhuanfa_ {
		font-size: 20px;
		color: #000;
		font-weight: bolder;
		padding: 10px 20px;
	}
	.caijibox {
		width: 80px;
		height: 40px;
		/* background-color: #FF5967; */
		border-radius: 12px;
		/* color: #fff; */
		text-align: center;
		line-height: 40px;
		cursor: pointer;
	}
	.top>.text {
		height: 80px;
		border-bottom: 1px solid #c8c8c8;
	}
	.text span {
		padding: 20px 10px;
	}
	.second {
		margin-top: 10px;
	}
	.second>div {
		width: 400px;
		height: 250px;
		/* border: 1px solid red; */
		border-radius: 10px;
	}
	.icon-liebiao,.second>span {
		padding: 20px 0px 5px 15px;
	}
	.imgbox {
		display: flex;
		flex-wrap: wrap;
		overflow: scroll;
		margin-top: 10px;
		border-radius: 10px;
	}
	.imgbox::-webkit-scrollbar {
	  height: 0;
	}
	.imgbox::-webkit-scrollbar-thumb {
	  width: 10px;
	}
	.imgbox img {
		width: 83px;
		margin: 5px;
		height: 150px;
	}
	.second {
		height: 300px;
		margin-bottom: 10px;
		border-bottom: 1px solid #c8c8c8;
	}
	.second+div {
		display: flex;
		align-items: center;
		/* border: 1px solid red; */
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
	}
	.second+div>img {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin: 0 5px;
	}
	/* .icon-xihuan {
		color: pink;
	} */
	.gather_box {
		width: 100%;
		height: 700px;
		/* border: 10px solid yellow; */
		background-color: rgba(55,55,55, 0.7);
		position: absolute;
		top: 0;
		left: 0;
	}
	/* 中间的盒子 */
	.gather_con {
		width: 500px;
		height: 300px;
		background-color: white;
		border-radius: 10px;
		position: relative;
	}
	.close {
		position: absolute;
		top: 5px;
		right: 10px;
	}
	.draw_box {
		width: 400px;
		height: 200px;
		overflow: scroll;
		text-align: center;
		border-radius: 10px;
		border: 1px solid #555555;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -100px;
		margin-left: -200px;
	}
	.draw_box::-webkit-scrollbar {
	  height: 0;
	}
	.draw {
		width: 350px;
		height: 40px;
		margin: 0 auto;
		margin-top: 10px;
		border-radius: 10px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		/* background-color: #F7F9FA; */
	}
	.draw:hover {
		background-color: #F7F9FA;
	}
	.draw button {
		width: 70px;
		height: 30px;
		border-radius: 10px;
		background-color: #FF5967;
		border: 1px solid #FF5967;
	}
	/* .draw_box>span {
		padding-bottom: 60px;
	} */
	hr {
		margin-top: 10px;
	}
</style>